<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>目录详情</title>
    <style>
        .editable-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            height: 38px;
        }

        .editable-input:focus {
            outline: none;
            border-color: #1a5a94;
            box-shadow: 0 0 0 0.2rem rgba(26, 90, 148, 0.25);
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            padding: 20px 0;
        }

        .action-button {
            padding: 10px 25px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.2s;
        }

        .update-button {
            background-color: #1a5a94;
            color: white;
        }

        .update-button:hover {
            background-color: #154a7a;
        }

        .reupload-button {
            background-color: #28a745;
            color: white;
        }

        .reupload-button:hover {
            background-color: #218838;
        }

        .detail-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .detail-table td {
            padding: 10px 15px;
        }

        .field-label {
            font-weight: bold;
            color: #333;
            font-size: 14px;
            white-space: nowrap;
            width: 15%;
        }

        .field-input {
            width: 35%;
        }

        .readonly-field {
            padding: 8px 12px;
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            height: 38px;
            display: flex;
            align-items: center;
            font-size: 14px;
            width: 100%;
        }

        .form-container {
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            padding: 20px;
        }

        @media (max-width: 992px) {
            .field-label {
                width: 20%;
            }

            .field-input {
                width: 30%;
            }
        }

        @media (max-width: 768px) {
            .detail-table {
                display: block;
            }

            .detail-table tr {
                display: block;
                margin-bottom: 15px;
            }

            .detail-table td {
                display: inline-block;
                width: 48%;
            }

            .field-label {
                width: 40%;
            }

            .field-input {
                width: 55%;
            }
        }
    </style>
</head>

<body>
    <div th:fragment="upDataCatalogDetail">
        <div style="padding: 20px;">
            <div style="margin-bottom: 20px;">
                <div style="margin-bottom: 20px; display: flex; align-items: center;">
                    <button id="backButton"
                        style="background-color: transparent; color: #1a5a94; border: none; cursor: pointer; display: inline-flex; align-items: center; margin-right: 10px; width: 36px; height: 36px; justify-content: center; border-radius: 50%;"
                        title="返回列表">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="15 18 9 12 15 6"></polyline>
                        </svg>
                    </button>
                    <h3 style="color: #1a5a94; margin: 0; display: inline-block;">目录详情</h3>
                </div>

                <form id="catalogEditForm">
                    <input type="hidden" name="id" th:value="${catalog?.id ?: ''}">
                    <input type="hidden" name="baseCataId" th:value="${catalog?.baseCataId ?: ''}">
                    <input type="hidden" name="extCataId" th:value="${catalog?.extCataId ?: ''}">
                    <input type="hidden" name="cdBatch" th:value="${catalog?.cdBatch ?: ''}">
                    <div class="form-container">
                        <table class="detail-table">
                            <tr>
                                <td class="field-label">扩展目录标题:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.extCataTitle ?: ''}"
                                        name="extCataTitle">
                                </td>
                                <td class="field-label">业务分组名称:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.businessGroupName ?: ''}" name="businessGroupName">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">扩展目录编码:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.extCataCode ?: ''}"
                                        name="extCataCode">
                                </td>
                                <td class="field-label">字段类型:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.fieldType ?: ''}"
                                        name="fieldType">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">字段类型名称:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.fieldTypeName ?: ''}"
                                        name="fieldTypeName">
                                </td>
                                <td class="field-label">任务目录名称:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.taskCatalogName ?: ''}" name="taskCatalogName">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">任务目录编码:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.taskCatalogCode ?: ''}" name="taskCatalogCode">
                                </td>
                                <td class="field-label">使用层级:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.useLevel ?: ''}"
                                        name="useLevel">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">描述:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.description ?: ''}"
                                        name="description">
                                </td>
                                <td class="field-label">扩展数据目录编码:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.extDataCataCode ?: ''}" name="extDataCataCode">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">共享条件:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.sharedCondition ?: ''}" name="sharedCondition">
                                </td>
                                <td class="field-label">来源事项名称:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.sourceItemName ?: ''}" name="sourceItemName">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">来源事项编码:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.sourceItemCode ?: ''}" name="sourceItemCode">
                                </td>
                                <td class="field-label">关联事项名称:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.relationItemName ?: ''}" name="relationItemName">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">关联事项编码:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.relationItemCode ?: ''}" name="relationItemCode">
                                </td>
                                <td class="field-label">重要程度:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.importanceLevel ?: ''}" name="importanceLevel">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">处理级别:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.pocessLevel ?: ''}"
                                        name="pocessLevel">
                                </td>
                                <td class="field-label">区域范围:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.aeraScope ?: ''}"
                                        name="aeraScope">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">其他区域范围:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.otherAeraScope ?: ''}" name="otherAeraScope">
                                </td>
                                <td class="field-label">时间范围:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.timeRange ?: ''}"
                                        name="timeRange">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">内部机构名称:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.internalOrgName ?: ''}" name="internalOrgName">
                                </td>
                                <td class="field-label">组织代码:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.orgCode ?: ''}"
                                        name="orgCode">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">扩展描述:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.extDescription ?: ''}" name="extDescription">
                                </td>
                                <td class="field-label">更新周期:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.updateCycle ?: ''}"
                                        name="updateCycle">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">其他更新周期:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.otherUpdateCycle ?: ''}" name="otherUpdateCycle">
                                </td>
                                <td class="field-label">是否发布:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.isPublish ?: ''}"
                                        name="isPublish">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">未发布原因:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.notPublishReason ?: ''}" name="notPublishReason">
                                </td>
                                <td class="field-label">区域名称:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.regionName ?: ''}"
                                        name="regionName">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">区域代码:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.regionCode ?: ''}"
                                        name="regionCode">
                                </td>
                                <td class="field-label">目录类型:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.catalogType ?: ''}"
                                        name="catalogType">
                                </td>
                            </tr>
                            <tr>
                                <td class="field-label">扩展目录版本:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input"
                                        th:value="${catalog?.extCataVersion ?: ''}" name="extCataVersion">
                                </td>
                                <td class="field-label">状态:</td>
                                <td class="field-input">
                                    <input type="text" class="editable-input" th:value="${catalog?.status ?: ''}"
                                        name="status">
                                </td>
                            </tr>
                        </table>
                    </div>

                    <!-- 信息项列表 -->
                    <div class="form-container" style="margin-top: 20px;">
                        <h4 style="color: #1a5a94; margin-bottom: 15px;">信息项列表</h4>
                        <div style="overflow-x: auto;">
                            <table class="data-table" style="table-layout: auto; min-width: 1200px;">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>中文名称</th>
                                        <th>字段代码</th>
                                        <th>数据格式</th>
                                        <th>共享条件类型</th>
                                        <th>共享条件</th>
                                        <th>系统名称</th>
                                        <th>系统ID</th>
                                        <th>系统组</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="item, iterStat : ${catalogItems}">
                                        <input type="hidden" th:name="'items[' + ${iterStat.index} + '].id'" th:value="${item.id}">
                                        <input type="hidden" th:name="'items[' + ${iterStat.index} + '].extCataId'" th:value="${item.extCataId}">
                                        <input type="hidden" th:name="'items[' + ${iterStat.index} + '].columnId'" th:value="${item.columnId}">
                                        <input type="hidden" th:name="'items[' + ${iterStat.index} + '].cdBatch'" th:value="${item.cdBatch}">
                                        <td th:text="${iterStat.index + 1}"></td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.nameCn}"
                                                th:name="'items[' + ${iterStat.index} + '].nameCn'" required>
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.columnCode}"
                                                th:name="'items[' + ${iterStat.index} + '].columnCode'" required>
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.dataFormat}"
                                                th:name="'items[' + ${iterStat.index} + '].dataFormat'" required>
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input"
                                                th:value="${item.shareConditionType}"
                                                th:name="'items[' + ${iterStat.index} + '].shareConditionType'" required>
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.shareCondition}"
                                                th:name="'items[' + ${iterStat.index} + '].shareCondition'">
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.systemName}"
                                                th:name="'items[' + ${iterStat.index} + '].systemName'" required>
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.systemId}"
                                                th:name="'items[' + ${iterStat.index} + '].systemId'" required>
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.systemGroup}"
                                                th:name="'items[' + ${iterStat.index} + '].systemGroup'" required>
                                        </td>
                                        <td>
                                            <input type="text" class="editable-input" th:value="${item.status}"
                                                th:name="'items[' + ${iterStat.index} + '].status'" required>
                                        </td>
                                    </tr>
                                    <tr th:if="${catalogItems == null or catalogItems.empty}">
                                        <td colspan="12" style="text-align: center; padding: 20px;">暂无相关信息项</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="button-group">
                        <button type="button" id="updateCatalogButton" class="action-button update-button">
                            更新目录信息
                        </button>
                        <button type="button" id="reuploadButton" th:attr="data-id=${catalog?.id ?: ''}"
                            class="action-button reupload-button">
                            重新上报目录
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>